<template>
    <div class="jianzhan-content">
        <crumb :name="$t('materialType.materialType')"></crumb>
        <div class="content">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="dialogVisible = true">{{$t('add')}}</el-button>
            <div class="table-wrapper">
                <el-table
                        :data="typeList"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="materialType"
                            :label="$t('materialType.materialType')"
                            >
                    </el-table-column>
                    <el-table-column
                            :label="$t('operate')">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" @click="openEdit(scope.row)" size="mini">{{$t('edit')}}</el-button>
                            <el-button type="danger" icon="el-icon-edit" @click="deleteType(scope.row)" size="mini">{{$t('delete')}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog
                    :title="$t('materialType.materialType')"
                    :visible.sync="dialogVisible"
                    width="50%"
                    >
                <el-form ref="form" :model="m" label-width="180px">
                    <el-from-item :label="$t('materialType.materialType')">
                        <el-input v-model="m.materialType" :placeholder="$t('materialType.materialType')"></el-input>
                    </el-from-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="submitForm">{{$t('confirm')}}</el-button>
              </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {getMaterialList,addMaterial,modMaterial,deleteMaterial} from "../../api";
    import {ERROR_OK} from "../../util/config";

    export default {
        name: "material-type",
        data() {
            return {
                dialogVisible:false,
                typeList: [],
                m:{
                    materialType:''
                }
            }
        },
        created(){
            this.getList()
        },
        methods: {
            async getList(){
                const {status,data} = await getMaterialList();
                if(status === ERROR_OK) {
                    this.typeList = data;
                } else {
                    this.$message.error('没有查询到相关信息')
                }
            },
            async submitForm() {
                if(!this.m.materialType) {
                    this.$message.error('物料类别必须填写');
                    return
                }
                const {id,materialType} = this.m;
                if(id){
                    const {status} = await modMaterial({id,materialType});
                    if(status === ERROR_OK) {
                        this.$message.success('修改成功');
                        this.dialogVisible = false;
                        this.getList();
                    }else{
                        this.$message.error('修改失败')
                    }
                } else {
                    const {status} = await addMaterial(materialType);
                    if(status === ERROR_OK) {
                        this.$message.success('新增成功');
                        this.dialogVisible = false;
                        this.getList();
                    }else{
                        this.$message.error('新增失败')
                    }
                }
                this.clear();
            },
            clear(){
                this.m = {
                    materialType:'',
                    id:''
                }
            },
            async deleteType(row){
                this.$confirm('是否删除?','Warning',{
                    cancelBtn:this.$t('cancel')
                }).then(async ()=>{
                    const {status} = await deleteMaterial(row.id);
                    if(status === ERROR_OK) {
                        this.$message.success('删除成功');
                        this.getList();
                    } else {
                        this.$message.error('删除失败')
                    }

                }).catch()
            },
            openEdit(row){
                this.m = {
                    materialType:row.materialType,
                    id:row.id
                }
                this.dialogVisible = true
            }
        },
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content{
        @include content
    }
</style>